<template>
    <div>
        <div
            class="footer1"
            :class="{ 'subscript-collapse': collapse }"
        >
            <div
                v-if="collapse"
                size="mini"
                class="button-fold"
                @click="collapseChage"
            >
                <i class="el-icon-s-unfold"></i>
            </div>
            <div
                v-else
                size="mini"
                class="button-fold"
                @click="collapseChage"
            >
                <i class="el-icon-s-fold"></i>
            </div>
        </div>
        <div class="content">
            <el-menu
                :default-active="nowRoute"
                :router="true"
                background-color="#545c64"
                text-color="#fff"
                @select="handlePermissionSelect"
                :collapse="collapse"
                active-text-color="#10a1df"
            >
                <el-submenu
                    v-for="(role, rIndex) in permissionGroupList"
                    :key="rIndex"
                    :index="'' + rIndex"
                >
                    <template slot="title">
                        <i
                            :class="role.icon"
                            style="color:#fff"
                        ></i>
                        <span>{{ role.name }}</span>
                    </template>
                    <el-menu-item
                        v-for="(permission, pIndex) in role.permissionList"
                        :index="permission.route"
                        :key="rIndex + '-' + pIndex"
                    >
                        <i
                            :class="permission.prefix"
                            style="color:#fff"
                        ></i>
                        <span>{{ permission.name }}</span>
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Sidebar',
    data() {
        return {
            // 权限列表数据结构
            permissionGroupList: this.$store.state.permissionList,
        };
    },
    computed: {
        // 默认激活权限项
        nowRoute() {
            console.log('nowRoute', this.$store.state.nowRoute);
            return this.$store.state.nowRoute;
        },
        collapse() {
            return this.$store.state.collapse;
        },
    },
    methods: {
        // 侧边栏折叠
        collapseChage(e) {
            this.$store.commit('hadndleCollapse', !this.collapse);
        },
        // 权限选择监听
        handlePermissionSelect(val) {
            console.log('handlePermissionSelect-val', val);
            if (val === '/samplesGallery') {
                const width = window.screen.availWidth + 10;
                const height = window.screen.availHeight + 10;
                window.open('http://10.1.192.128:9001/index/', '_blank', `location=no,width=${width},height=${height}`);
            } else {
                this.$store.commit('setPropertyGeneral', {
                    key: 'nowRoute',
                    value: val,
                });
            }
        },
    },
};
</script>

<style scoped>
.content {
    background: #545c64;
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
}

.content::-webkit-scrollbar {
    width: 0;
}

.content:not(.el-menu--collapse) {
    width: 200px;
}

.sidebar > ul {
    height: 100%;
}

.footer1 {
    overflow: visible;
    position: absolute;
    top: 65px;
    left: 175px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 30px;
    font-size: 25px;
    color: #008cc8;
    z-index: 1000;
    font-weight: bold;
}

.content > .el-menu > li {
    margin: 1px -1px;
}

.button-fold {
    float: right;
    border: none;
    cursor: pointer;
}

.subscript-collapse {
    left: 40px;
}
/deep/ .el-icon-arrow-left {
    animation: myfirst 2s;
}

@keyframes myfirst {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes myfirst /* Safari 与 Chrome */ {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
</style>
